<template>
  <h1>添加管理员</h1>
  <hr />
  <el-card>
    <el-radio-group v-model="labelPosition" label="label position">
    <el-radio-button label="left">Left</el-radio-button>
    <el-radio-button label="right">Right</el-radio-button>
    <el-radio-button label="top">Top</el-radio-button>
    
  </el-radio-group>
  <el-form
  ref="ruleFormRef"
    label-width="100px"
    :model="AddAdmin"
    :rules="rules"
    style="max-width: 460px"
  >
    <el-form-item label="管理员姓名" prop="phone" >
      <el-input v-model="AddAdmin.adminname"  />
    </el-form-item>
    <el-form-item label="密码" prop="pass" > 
      <el-input v-model="AddAdmin.password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="角色">
      <el-radio-group v-model="AddAdmin.role">
        <el-radio :label="1">超级管理员</el-radio>
        <el-radio :label="2">普通管理员</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 树形选择组件 -->
    <el-tree
    ref="treeRef"
    :data="data"
    show-checkbox
    node-key="id"
  />
    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)">添加</el-button>
    </el-form-item>
  </el-form>
  </el-card>
  
  <div style="margin: 20px" />
  
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage,ElTree } from "element-plus";
import "element-plus/dist/index.css";
// 树形图的数据在另一个文件集中定义，用于动态渲染
import { menuData as data } from "../../../permessions/menu";
// 在setup函数里（setup语法糖里），如果想使用路由对象。
import { useRouter } from "vue-router";
import { user_add } from "../../../utils/api";
import type { FormInstance } from 'element-plus'
const $router = useRouter();
const labelPosition = ref("top");

interface Tree {
  id: string
  label: string
  children?: Tree[]
}

const treeRef = ref <typeof ElTree>()
const AddAdmin = reactive({
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});
// 定义用户户名和密码的正则
const ruleFormRef = ref<FormInstance>()
const validatePhone = (rule:any, value:string, callback:any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (/^[\w]{4,16}$/.test(AddAdmin.adminname) == false) {
    callback(new Error("用户名长度在4-16位"));
  } else {
    callback();
  }
};
const validatePass = (rule:any, value:string, callback:any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  }else if(/^[\w]{6,}$/.test(AddAdmin.password)==false){
    callback(new Error("密码至少六位"));
  }
   else {
    callback();
  }
};

const rules = ref({
  pass: [{ validator: validatePass, trigger: "change" }],
  phone: [{ validator: validatePhone, trigger: "change" }],
});
const onSubmit = (formEl: FormInstance | undefined) => {
 

  if (!formEl) return
  formEl.validate((valid) => {
    // 满足正则

    if (valid) {
      let arr =treeRef.value!.getCheckedKeys(false);
  let halfarr=treeRef.value!.getHalfCheckedKeys(false)
  AddAdmin.checkedKeys=arr.concat(halfarr)
       user_add(AddAdmin).then((res) => {
      if (res.data.code === "200") {
        ElMessage({
          message: "添加管理员成功！",
          type: "success",
        });
        $router.push("/HomeIndex/AdminList");
      } else if (res.data.code === "10004") {
        ElMessage({
          message: "该管理员已存在！",
          type: "warning",
        });
      }
    })
    }else {
      ElMessage({
        message:'用户名或密码不符规则',
        type:'error'
      })
      return false
    }
  })
  }
</script>

<style>
</style>